<template>
  <div class="toiEquip">
    <div class="account_top">
      <div class="input_one">
        <span>设备名称：</span>
        <a-input v-model="form1.equipName" style="width: 75%" />
      </div>
      <div class="input_one">
        <span>厕所名称：</span>
        <a-input v-model="form1.toiletName" style="width: 75%" />
      </div>
      <div class="account_center">
        <a-button type="primary" @click="reload"> 重置 </a-button>
        <a-button @click="searchOne">查询</a-button>
      </div>
    </div>
    <div class="account_bottom">
        <div class="bottom_top">
            <!-- <a-button type="primary" icon="plus" style="margin-right:30px" @click="showModal">
                新建
            </a-button> -->
        </div>
        <div class="tottom_table">
            <a-table
            :columns="columns"
            :data-source="equipData"
            :pagination="false"
            :bordered="true"
            :scroll="{ x: 'max-content' }"
            :rowKey="(record, index) => index"
            >
            </a-table>
            <a-pagination v-model="current" size="small" :pageSize="pageSize" @change="currentpage" showQuickJumper  :total="total" show-less-items style="text-align: right;margin-top: 15px;" />
        </div>
    </div>
    <a-modal v-model="visible" title="新建台账" @cancel="handleCancel" @ok="handleOk" :width="'50%'" ok-text="确认" cancel-text="取消">
          <div class="inputAll" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <div class="inputOneee" style="width: 45%;display: flex;justify-content: space-between;margin-bottom:10px">
              <span style="display: inline-block;width: 30%;text-align:right">编号：</span>
              <a-input v-model="form2.id" style="width:70%"/>
            </div>
          </div>
    </a-modal>
  </div>
</template>

<script>
import {getToiEquipData,searchEquipData} from '../../api'
export default {
  data() {
    return {
      form1:{
        equipName:'',
        toiletName:'',
      },
      form2:{
        id:'',
      },
      columns:[
            {
                title: '序号',
                dataIndex: 'id',
            },
            {
                title: '编号',
                dataIndex: 'number',
            },
            {
                title: '名称',
                dataIndex: 'name',
            },
            {
                title: '所属部门',
                dataIndex: 'department',
            },
            {
                title: '类型',
                dataIndex: 'type',
            },
            {
                title: '上限值',
                dataIndex: 'upper_limit',
            },
            {
                title: '下限值',
                dataIndex: 'lower_limit',
            },
            {
                title: '备注',
                dataIndex: 'remark',
            }
        ],
        equipData:[],
        selectedRowKeys: [],
        loading: false,
        current:1,
        pageSize:10,
        total:0,
        visible:false,
    };
  },
  mounted(){
    this.getDataOfEquip()
  },
  methods: {
    async getDataOfEquip(){
      let page = this.current
      let page_size = this.pageSize
      let res = await getToiEquipData(page,page_size)
      this.total = res.count
      this.equipData = res.results
    },
    currentpage(val){
        this.current = val
        this.getDataOfEquip()
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    handleCancel(){
      this.visible = false;
    },
    async searchOne(){
      this.current = 1
      let page = this.current
      let page_size = this.pageSize
      let name1 = this.form1.equipName
      let name2 = this.form1.toiletName
      let res = await searchEquipData(name1,name2,page,page_size)
      this.total = res.count
      this.equipData = res.results
    },
    reload(){
      this.current = 1
      this.form1 = {}
      this.current = 1
      this.getDataOfEquip()
    },
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
};
</script>

<style lang="less">
.toiEquip {
  padding: 24px;
  .account_top {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    .input_one {
      width: 33.33%;
      margin: 10px 0 10px 0;
      span {
        width: 25%;
        display: inline-block;
        text-align: right;
      }
    }
    .account_center {
      margin-top: 10px;
      width: 33.33%;
      text-align: right;
    }
  }
  .account_bottom{
      .bottom_top{
          margin: 50px 0 30px 0;
      }
  }
  .table {
    :global {
      .ant-table-thead > tr > th {
        background: #fff !important;
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
      .ant-table-tbody >tr> td {
        white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
      }
    }
  }
  .ss{
    span{
      width: 100%!important;
    }
  }
}
</style>